<template>
  <div>
    <div class="box">
      <el-button type="primary" @click="handleAddMeet">增加活动</el-button>
    </div>
    <div class="box">
      <el-table
          :data="tableData"
          border
          style="width: 100%">
          <el-table-column
            prop="meetId"
            label="ID"
            width="80">
          </el-table-column>
          <el-table-column
            prop="title"
            label="标题"
            width="320">
          </el-table-column>
          <el-table-column
            prop="sortRank"
            label="显示顺序"
            width="180">
          </el-table-column>
          <el-table-column
            prop="meetGroup"
            label="主办方"
            width="180">
          </el-table-column>
          <el-table-column
            prop="meetGuest"
            label="嘉宾"
            width="180">
          </el-table-column>
          <el-table-column
            prop="beginTime"
            label="开始时间">
          </el-table-column>
          <el-table-column
            prop="endTime"
            label="结束时间">
          </el-table-column>
          <el-table-column label="操作" width="280">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="primary"
                    @click="handleEdit(scope.$index, scope.row)">修改</el-button>
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
              </el-table-column>
        </el-table>
    </div>

    <div style="margin: 10px;">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="pageNum"
        :page-sizes="[10, 15, 20, 30]"
        :page-size="pageSize"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        >
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import {getMeetByPage,delMeet} from '@/api/news.js'
  export default {
    name: 'Resource',
    data() {
      return {
        tableData: [],
        total: 0,
        pageSize: 10,
        pageNum: 1,
      }
    },
    mounted() {
      this.loadList()
    },
    methods: {
      loadList() {
        let param = {
          pageNum: this.pageNum,
          pageSize: this.pageSize
        }
        getMeetByPage(param).then(res => {
          console.log('getMeetByPage', res);
          if(res.code == 200) {
            this.tableData = res.data.records
            this.pageNum = res.data.current
            this.pageSize = res.data.size
            this.total = res.data.total
          }
        })
      },
      handleDelete(index, row) {
        console.log('handleDelete', row)
        this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let param = {id: row.meetId}
          delMeet(param).then(res => {
            if(res.code == 200) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.loadList()
            }
          })
        });
      },
      handleEdit(index, row) {
        console.log('handleEdit', row)
        this.$router.push('/news/meetAdd/' + row.meetId)
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`)
        this.pageNum = val
        this.loadList()
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`)
        this.pageSize = val
        this.loadList()
      },
      handleAddMeet() {
        console.log('handleAddMeet');
        this.$router.push('/news/meetAdd/0')
      }

    }
  }
</script>

<style scoped>
  .box {
    margin: 10px;
  }
</style>
